<!DOCTYPE html>
<!-- saved from url=(0042)price.html -->
<html lang="en"
	class=" js no-touch no-android chrome no-firefox no-iemobile no-ie no-ie10 no-ie11 no-ios no-ios7 ipad">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Notebook | Web Application</title>
<meta name="description"
	content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./price_files/font.css" type="text/css">
<link rel="stylesheet" href="./price_files/landing.css" type="text/css">
<link rel="stylesheet" href="./price_files/app.v1.css" type="text/css">
<!--[if lt IE 9]> <script src="js/ie/html5shiv.js"></script> <script src="js/ie/respond.min.js"></script> <script src="js/ie/excanvas.js"></script> <![endif]-->
</head>
<body class="" style="">
	<!-- header -->
	<header id="header"
		class="navbar navbar-fixed-top bg-white box-shadow b-b b-light affix-top"
		data-spy="affix" data-offset-top="1">
		<div class="container">
			<div class="navbar-header">
				<a href="price.html#" class="navbar-brand"><img
					src="./price_files/logo.png" class="m-r-sm"><span
					class="text-muted">Notebook</span></a>
				<button class="btn btn-link visible-xs" type="button"
					data-toggle="collapse" data-target=".navbar-collapse">
					<i class="fa fa-bars"></i>
				</button>
			</div>
			<div class="collapse navbar-collapse">
				<ul class="nav navbar-nav navbar-right">
					<li class="active"><a href="landing.html">Home</a></li>
					<li><a href="features.html">Features</a></li>
					<li><a href="price.html">Plans &amp; Pricing</a>
					</li>
					<li><a href="blog.html">Blog</a></li>
					<li>
						<div class="m-t-sm">
							<a href="login.jsp" class="btn btn-link btn-sm">Sign in</a> <a
								href="signup.html" class="btn btn-sm btn-success m-l"><strong>Sign
									up</strong></a>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</header>
	<!-- / header -->
	<section id="content">
		<div class="bg-dark lt">
			<div class="container">
				<div class="m-b-lg m-t-lg">
					<h3 class="m-b-none">Plans &amp; Pricing</h3>
					<small class="text-muted">Choose the plan that best fits
						your needs</small>
				</div>
			</div>
		</div>
		<div class="bg-white b-b b-light">
			<div class="container">
				<ul class="breadcrumb no-border bg-empty m-b-none m-l-n-sm">
					<li><a href="landing.html">Home</a></li>
					<li class="active">Price</li>
				</ul>
			</div>
		</div>
		<div class="container">
			<div class="m-t-xl m-b-xl text-center">
				<h2>Find the Right Pricing Plan For You</h2>
			</div>
			<div class="clearfix">
				<div class="row m-b-xl">
					<div class="col-sm-4 animated fadeInLeftBig">
						<section class="panel b-light text-center m-t">
							<header class="panel-heading bg-white b-light">
								<h3 class="m-t-sm">Personal</h3>
								<p>for freelancers and start ups</p>
							</header>
							<ul class="list-group">
								<li class="list-group-item text-center bg-light lt"><span
									class="text-danger font-bold h1">$20</span> / month</li>
								<li class="list-group-item">Max 50 projects</li>
								<li class="list-group-item">Max 500 tasks</li>
								<li class="list-group-item">Max 2,000 users</li>
								<li class="list-group-item">Upgrade for next update</li>
								<li class="list-group-item">7*24 free support</li>
							</ul>
							<footer class="panel-footer">
								<a href="price.html#" class="btn btn-primary m-t m-b">Get
									Started</a>
							</footer>
						</section>
					</div>
					<div class="col-sm-4 animated fadeInUp">
						<section class="panel b-primary text-center">
							<header class="panel-heading bg-primary">
								<h3 class="m-t-sm">Business</h3>
								<p>for businesses and organizations</p>
							</header>
							<ul class="list-group">
								<li class="list-group-item text-center bg-light lt">
									<div class="padder-v">
										<span class="text-danger font-bold h1">$50</span> / month
									</div>
								</li>
								<li class="list-group-item">Max 500 projects</li>
								<li class="list-group-item">Max 5,000 tasks</li>
								<li class="list-group-item">Max 20,000 users</li>
								<li class="list-group-item">Upgrade for next update</li>
								<li class="list-group-item">7*24 free support</li>
							</ul>
							<footer class="panel-footer">
								<a href="price.html#" class="btn btn-primary m-t m-b">Get
									Started</a>
							</footer>
						</section>
					</div>
					<div class="col-sm-4 animated fadeInRightBig">
						<section class="panel b-light text-center m-t">
							<header class="panel-heading bg-white b-light">
								<h3 class="m-t-sm">Enterprise</h3>
								<p>for enterprise and companies</p>
							</header>
							<ul class="list-group">
								<li class="list-group-item text-center bg-light lt"><span
									class="text-danger font-bold h1">$100</span> / month</li>
								<li class="list-group-item">Unlimited projects</li>
								<li class="list-group-item">Unlimited tasks</li>
								<li class="list-group-item">Unlimited users</li>
								<li class="list-group-item">Upgrade for next update</li>
								<li class="list-group-item">7*24 free support</li>
							</ul>
							<footer class="panel-footer">
								<a href="price.html#" class="btn btn-primary m-t m-b">Get
									Started</a>
							</footer>
						</section>
					</div>
				</div>
			</div>
		</div>
		<div class="bg-white-only">
			<div class="container">
				<div class="m-t-xl m-b-xl">
					<h2 class="font-thin">Why more than 21,000 project owners have
						chosen us</h2>
				</div>
				<div class="row m-b-xl">
					<div class="col-sm-4 appear" data-ride="animated"
						data-animation="fadeInLeft" data-delay="300">
						<span class="fa-stack fa-2x pull-left m-r m-t-xs"> <i
							class="fa fa-circle fa-stack-2x text-info"></i> <i
							class="fa fa-stack-1x fa-inverse">1</i>
						</span>
						<div class="clear">
							<h4>Lightweight with Rich Components</h4>
							<p class="text-muted text-sm">
								We only choose the lightweight plugins, but with rich functions.
								we use tiny components, css and js size is first consideration.
								<br>
								<br>This project ues HTML5 and CSS3 to build the components
								and widgets. the pages use header, nav, section to build the
								layout.
							</p>
						</div>
					</div>
					<div class="col-sm-4 appear" data-ride="animated"
						data-animation="fadeInLeft" data-delay="600">
						<span class="fa-stack fa-2x pull-left m-r m-t-xs"> <i
							class="fa fa-circle fa-stack-2x text-info"></i> <i
							class="fa fa-stack-1x fa-inverse">2</i>
						</span>
						<div class="clear">
							<h4>Keep Updating with Great Support</h4>
							<p class="text-muted text-sm">
								This project is based on Bootstrap 3. the sleek, intuitive, and
								powerful mobile-first front-end framework for faster and easier
								web development. we will keep it updated to Bootstrap.<br>
								<br> <a href="price.html#" class="text-primary">More...</a>
							</p>
						</div>
					</div>
					<div class="col-sm-4 appear" data-ride="animated"
						data-animation="fadeInLeft" data-delay="900">
						<span class="fa-stack fa-2x pull-left m-r m-t-xs"> <i
							class="fa fa-circle fa-stack-2x text-info"></i> <i
							class="fa fa-stack-1x fa-inverse">3</i>
						</span>
						<div class="clear">
							<h4>HTML5 &amp; CSS3 with Clean Design</h4>
							<p class="text-muted text-sm">This project ues HTML5 and CSS3
								to build the components and widgets. the pages use header, nav,
								section to build the layout.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- footer -->
	<footer id="footer">
		<div class="bg-primary text-center">
			<div class="container wrapper">
				<div class="m-t-xl m-b">
					For your faster and easier web development. <a
						href="http://themeforest.net/user/Flatfull/portfolio?ref=flatfull"
						target="_blank" class="btn btn-lg btn-dark b-white bg-empty m-sm">Download
						it</a> <a href="index.jsp" target="_blank"
                                  class="btn btn-lg btn-warning b-white bg-empty m-sm">Live
						Preview</a>
				</div>
			</div>
			<i class="fa fa-caret-down fa-4x text-primary m-b-n-lg block"></i>
		</div>
		<div class="bg-dark dker wrapper">
			<div class="container text-center m-t-lg">
				<div class="row m-t-xl m-b-xl">
					<div class="col-sm-4 appear" data-ride="animated"
						data-animation="fadeInLeft" data-delay="300">
						<i class="fa fa-map-marker fa-3x icon-muted"></i>
						<h5 class="text-uc m-b m-t-lg">Find Us</h5>
						<p class="text-sm">
							23 soe Midlokls <br> 120002 Loki — UNITED KINGDOM
						</p>
					</div>
					<div class="col-sm-4 appear" data-ride="animated"
						data-animation="fadeInUp" data-delay="600">
						<i class="fa fa-envelope-o fa-3x icon-muted"></i>
						<h5 class="text-uc m-b m-t-lg">Mail Us</h5>
						<p class="text-sm">
							<a href="mailto:hey@example.com">info@example.com</a>
						</p>
					</div>
					<div class="col-sm-4 appear" data-ride="animated"
						data-animation="fadeInRight" data-delay="900">
						<i class="fa fa-globe fa-3x icon-muted"></i>
						<h5 class="text-uc m-b m-t-lg">Join Us</h5>
						<p class="text-sm">
							Send your resume to <br>
							<a href="mailto:hey@example.com">recruit@example.com</a>
						</p>
					</div>
				</div>
				<div class="m-t-xl m-b-xl">
					<p>
						<a href="price.html#"
							class="btn btn-icon btn-rounded btn-facebook bg-empty m-sm"><i
							class="fa fa-facebook"></i></a> <a href="price.html#"
							class="btn btn-icon btn-rounded btn-twitter bg-empty m-sm"><i
							class="fa fa-twitter"></i></a> <a href="price.html#"
							class="btn btn-icon btn-rounded btn-gplus bg-empty m-sm"><i
							class="fa fa-google-plus"></i></a>
					</p>
					<p>
						<a href="price.html#content" data-jump="true"
							class="btn btn-icon btn-rounded btn-dark b-dark bg-empty m-sm text-muted"><i
							class="fa fa-angle-up"></i></a>
					</p>
				</div>
			</div>
		</div>
	</footer>
	<!-- / footer -->
	<!-- Bootstrap -->
	<!-- App -->
	<script src="./price_files/app.v1.js"></script>
	<script src="./price_files/jquery.appear.js"></script>
	<script src="./price_files/smoothscroll.js"></script>
	<script src="./price_files/landing.js"></script>
	<script src="./price_files/app.plugin.js"></script>
</body>
</html>